<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/index.css">
    <script  type="text/javascript">
        var ws;
        var wsUri = "ws://localhost:8080/web/echo";
        ws = new WebSocket(wsUri);
        var n='${sessionScope.user.userName}';
        ws.onopen = function(){
            ws.send(n);//在服务端必须由OnMessage接收此消息
        };

        //处理连接后的信息处理  session.getBasicRemote().sendText(message);
        //接收服务器返回的数据
        ws.onmessage = function(message){
            writeToScreen(message.data);
        };
        //对发送按钮进行监听，获取发送的信息和发送对象
        function button(){
            message = document.getElementById('in').value;
            towho = document.getElementById('towho').value + "@";
            ws.send(towho+message);
        }

        //发生错误时，处理错误
        ws.onerror = function (evt){
            writeToScreen('<span style="color:red;">ERROR:</span>'+evt.data);
            ws.close();
        };

        //把信息显示到当前屏幕
        function writeToScreen(message){
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.style.marginRight="10px";
            pre.innerHTML = message;
            output.appendChild(pre);
        }

        //当关闭页面时执行ws.close
        window.onbeforeunload=function (){
            ws.close();
        };
    </script>
</head>

<body>

    <div class="qqBox">
        <!-- xx -->
        <div class="BoxHead">
            <!-- <div class="headImg">
			<img src="./index_files/6.jpg">
		</div> -->
            <div class="internetName"></div>
            <div class="tubiao">
                <span><img style="width: 20px; margin: 15px 5px;" src="${pageContext.request.contextPath}/style/picture/xiao.png" alt=""></span>
                <span><img style="width: 20px; margin: 15px 5px;" src="${pageContext.request.contextPath}/style/picture/da.png" alt=""></span>
                <span><img style="width: 20px; margin: 15px 5px;" src="${pageContext.request.contextPath}/style/picture/iocnqx.png" alt=""></span>
            </div>
        </div>
        <!-- 好友聊天类容 -->
        <div class="context" >

            <div class="conLeft">
                <div class="shouBox">
                    <div class="shous">
                        <div style="height: 60px;">
                            <img class="touimg" src="${pageContext.request.contextPath}/style/picture/touxiang3.png" alt="">
                        </div>
                        <div class="txiangName">${sessionScope.userName}</div>
                        <div style="height: 52px;">
                            <img class="caidanImg" src="${pageContext.request.contextPath}/style/picture/caidan.png" alt="">
                        </div>
                    </div>


                    <!-- 搜索 -->

                    <form style="height: 130px;" onsubmit="submitFn(this, event);">
                        <div class="search-wrapper">
                            <div class="input-holder">
                                <input type="text" class="search-input" placeholder="请输入关键词">
                                <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
                            </div>
                            <span class="close" onclick="searchToggle(this, event);"></span>
                            <div class="result-container">

                            </div>
                        </div>
                    </form>

                    <!-- 菜单分组 -->
                    <div class="aui-flexView">

                        <div class="aui-scrollView">
                            <div class="aui-tab-box" data-ydui-tab="">
                                <div class="tab-nav">

                                    <div class="tab-nav-item">
                                        <a href="javascript:;">好友</a>
                                    </div>

                                </div>



                            </div>

                        </div>
                        <ul class="row">
                            <%--<li>
                                <div class="liLeft"><img src="static/picture/20170926103645_04.jpg"></div>
                                <div class="liRight">
                                    <span class="intername">前端交流群</span>
                                </div>
                            </li>--%>
                        </ul>
                    </div>


                </div>
               
            </div>
            <div class="conRight">
                <div class="Righthead">
                    <!-- <div class="headName">赵鹏</div>
				<div class="headConfig">
					<ul>
						<li><img src="./index_files/20170926103645_06.jpg"></li>
						<li><img src="./index_files/20170926103645_08.jpg"></li>
						<li><img src="./index_files/20170926103645_10.jpg"></li>
						<li><img src="./index_files/20170926103645_12.jpg"></li>
					</ul>
				</div> -->
                </div>
                <!-- 显示聊天内容 -->
                <div id="output" class="RightCont">

                </div>

                <div class="RightFoot">
                    <div class="emjon" style="display: none;">
                        <ul>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_02.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_05.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_07.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_12.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_14.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_16.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_20.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_23.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_25.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_30.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_31.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_33.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_37.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_38.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_40.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_45.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_47.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_48.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_52.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_54.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_55.jpg"></li>
                        </ul>
                    </div>
                    <div class="footTop">

                    </div>
                    <div class="inputBox">
                        <textarea id="in" name="message" style="width: 99%;height: 75px; border: none;outline: none; resize:none;" name="" rows="" cols=""></textarea>
                        @
                        <input id="towho"style="width:60px;height:30px;" name="towho" value="all">
                        <button onclick="button()" value="发送" class="sendBtn">发送(s)</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/js/index.js"></script>



</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script>
    $(function(){
        alert("进入ajax");
        $.ajax({
            url:"${pageContext.request.contextPath}/FriendController/queryfirend",
            type:"GET",
            dataType:"JSON",
            success:function(data){
                var content="";
                $.each(data,function (index,obj) {
                    content+="<li>\n" +
                        "                 <div class=\"liLeft\"><img src=\"${pageContext.request.contextPath}/style/picture/tx.jpg\"></div>\n" +
                        "                           <div class=\"liRight\">\n" +
                        "                                   <a href=\"${pageContext.request.contextPath}/monilogin.jsp\">"+obj.friend.userName+"</a>\n" +
                        "                                </div>\n" +
                        "                            </li>";
                })
                $(".row").html(content);
            },
            error:function () {
                alert("请求失败")
            }
        })
    })
</script>
</html>